<template>
	<view>
		<uni-nav-bar :title="$t('systemMsg')" :fixed="true" :border="false" color="var(--theme-text-color)" backgroundColor="var(--theme-color)">
		</uni-nav-bar>
		<view class="icon-xl circle flex-center back-btn" style="position: fixed;top: 5px;left: 16px;z-index: 100;" @click="backPage">
			<uni-icons type="arrow-left" size="24" color="#fff"></uni-icons>
		</view>
		<!-- 隐私政策内容 -->
		<view class="notice-list" v-show="list.length > 0">
			<view class="notice-item radius-12" v-for="(item,index) in list" :key="index">
				<image class="icon" src="/static/notice/tx-cg.png" mode=""></image>
				<view class="right overflow-hidden">
					<view class="title fb fs14">
						<text>{{item.title}}</text>
						<p v-html="item.content"></p>
					</view>
					<view class="time fs12 text-sm text-des-color isRead"> {{item.createtime}} </view>
				</view>
			</view>
		</view>
		<!-- 空展示图片 -->
		<view class="" v-show="list.length == 0">
			<view class="empty flex-column">
				<image src="/static/msg.png" mode=""></image>
				<text class="text-des-color fs14">{{$t('nosystemMsg')}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { onMounted, ref } from 'vue';
	import { getMsg } from '../../api/index.js'
	const backPage = () =>{
		// 返回上一页
		// uni.navigateBack({
		//   delta: 1 // 默认值为1，表示返回上一页
		// });
		history.back()
	}
	const info = ref({})
	const list = ref([])
	onMounted(() =>{
		getMsg().then(res =>{
			// console.log('系统消息 res',res);
			// info.value = res.data
			if(res.data.length == 0){
				finished.value = true
			}else{
				list.value = list.value.concat(res.data)
			}
		})
	})
</script>

<style scoped>
	.notice-list{
		padding: 0 20px;
	}
	.notice-item {
		padding: 12px;
		background-color: #fff;
		box-sizing: border-box;
		margin-top: 10px;
		display: flex;
		flex-shrink: 0;
	}
	.icon{
	    width: 22px;
	    height: 22px;
	    border-radius: 50%;
		flex-shrink: 0;
	}
	.notice-item .right {
	    margin-left: 10px;
		display: flex;
		flex-direction: column;
		flex-shrink: 0;
		width: 560rpx;
	}
	.isRead {
	    color: #aeaeae!important;
	}
	.notice-item .time {
	    font-family: San Francisco Display-Regular,San Francisco Display;
		margin-top: 8px;
	}
	.title{
		font-weight: 500;
	}
	.flex-1 {
	    flex: 1;
	}
	.empty{
		margin-top: 120px;
	}
	.empty image {
	    width: 176px;
	    height: 176px;
	}
</style>
